<form nz-form [formGroup]="userForm">
  <fieldset>
    <nz-tabset>
      <!-- 用户资料选项卡 -->
      <nz-tab [nzTitle]="userInfoTabTitleTpl">
        <ng-template #userInfoTabTitleTpl>
          <span>用户信息</span>
        </ng-template>

        <!-- 名字 -->
        <nz-form-item>
          <nz-form-label nzRequired nzFor="name">名字</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="名字" formControlName="name" [(ngModel)]="user.name" maxlength="32">
            <nz-form-explain *ngIf="userForm.get('name').dirty && userForm.get('name').errors">
              <ng-container *ngIf="userForm.get('name').errors['required']">此项为必填项！</ng-container>
              <ng-container *ngIf="userForm.get('name').errors['maxLength']">版本名称最大长度不得超过32个字符！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 姓氏 -->
        <nz-form-item>
          <nz-form-label nzRequired nzFor="surname">姓氏</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="姓氏" formControlName="surname" [(ngModel)]="user.surname" maxlength="32">
            <nz-form-explain *ngIf="userForm.get('surname').dirty && userForm.get('surname').errors">
              <ng-container *ngIf="userForm.get('surname').errors['required']">此项为必填项！</ng-container>
              <ng-container *ngIf="userForm.get('surname').errors['maxLength']">版本名称最大长度不得超过32个字符！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 用户名 -->
        <nz-form-item>
          <nz-form-label nzRequired nzFor="userName">用户名</nz-form-label>
          <nz-form-control>
            <input nz-input type="userName" placeholder="用户名" formControlName="userName" [(ngModel)]="user.userName"
              maxlength="32">
            <nz-form-explain *ngIf="userForm.get('userName').dirty && userForm.get('userName').errors">
              <ng-container *ngIf="userForm.get('userName').errors['required']">此项为必填项！</ng-container>
              <ng-container *ngIf="userForm.get('userName').errors['maxLength']">版本名称最大长度不得超过32个字符！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 邮箱地址 -->
        <nz-form-item>
          <nz-form-label nzRequired nzFor="emailAddress">邮箱地址</nz-form-label>
          <nz-form-control>
            <input nz-input type="email" placeholder="邮箱地址" formControlName="emailAddress" [(ngModel)]="user.emailAddress"
              maxlength="256">
            <nz-form-explain *ngIf="userForm.get('emailAddress').dirty && userForm.get('emailAddress').errors">
              <ng-container *ngIf="userForm.get('emailAddress').errors['email']">请输入正确的email地址</ng-container>
              <ng-container *ngIf="userForm.get('emailAddress').errors['required']">此项为必填项！</ng-container>
              <ng-container *ngIf="userForm.get('emailAddress').errors['maxLength']">版本名称最大长度不得超过256个字符！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 电话号码 -->
        <nz-form-item>
          <nz-form-label nzFor="phoneNumber">电话号码</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="电话号码" formControlName="phoneNumber" [(ngModel)]="user.phoneNumber" maxlength="24">
            <nz-form-explain *ngIf="userForm.get('phoneNumber').dirty && userForm.get('phoneNumber').errors">
              <ng-container *ngIf="userForm.get('phoneNumber').errors['maxLength']">版本名称最大长度不得超过24个字符！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 用户是否使用默认密码 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox formControlName="useDefaultPassword" [(ngModel)]="useDefaultPassword">使用默认密码</label>
            </div>
          </div>
        </div>

        <!-- 密码 -->
        <nz-form-item *ngIf="!useDefaultPassword">
          <nz-form-label nzFor="password">密码</nz-form-label>
          <nz-form-control>
<input type="password" nz-input placeholder="密码" [(ngModel)]="user.password" formControlName="password"
              maxlength="32" minlength="6">
          </nz-form-control>
        </nz-form-item>

        <!-- 下次登录需要修改密码 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox formControlName="shouldChangePasswordOnNextLogin" [(ngModel)]="user.shouldChangePasswordOnNextLogin">下次登录需要修改密码</label>
            </div>
          </div>
        </div>

        <!-- 激活 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox formControlName="isActive" [(ngModel)]="user.isActive">激活</label>
            </div>
          </div>
        </div>

        <!-- 是否启用锁定？ -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox formControlName="isLockoutEnabled" [(ngModel)]="user.isLockoutEnabled">是否锁定</label>
            </div>
          </div>
        </div>
      </nz-tab>

      <!-- 角色选项卡 -->
      <nz-tab [nzTitle]="roleTitleTpl">
        <ng-template #roleTitleTpl>
          <nz-badge [nzCount]="getAssignedRoleCount()">
            <span>角色</span>
          </nz-badge>
        </ng-template>
        <nz-row>
          <!-- 下次登录需要修改密码 -->
          <div nz-col nzSpan="24" *ngFor="let role of roles">
            <div nz-row>
              <div style="margin-bottom: 20px;" nz-col nzSpan="12">
                <label nz-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="role.isAssigned">{{role.roleDisplayName}}</label>
              </div>
            </div>
          </div>
        </nz-row>
      </nz-tab>
    </nz-tabset>
  </fieldset>
</form>

<div class="drawer_footer">
  <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
  <button nz-button type="button" class="ant-btn ant-btn-primary" (click)="submitForm()" [nzLoading]="isLoadingBtn"><span>提交</span></button>
</div>